import { Table } from 'antd';
import React from 'react';
import './css/style.css'
const columns = [
  {
    title: 'URL',
    dataIndex: 'url',
  },
  {
    title: 'IP',
    dataIndex: 'ip',
  },
  {
    title: '浏览器',
    dataIndex: 'browser',
  },
  {
    title: '内核',
    dataIndex: 'kernel',
  },
  {
    title: '操作系统',
    dataIndex: 'operatingSystem',
  },
  {
    title: '设备',
    dataIndex: 'equipment',
  },
  {
    title: '地址',
    dataIndex: 'address',
  },
  {
    title: '访问量',
    dataIndex: 'traffic',
  },
  {
    title: '访问时间',
    dataIndex: 'time',
  },
  {
    title: '操作',
    dataIndex: 'operation',
  },
];

const data:any = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    url: `url`,
    ip: `ip`,
    browser: `浏览器`,
    kernel: `内核`,
    operatingSystem:`操作系统`,
    equipment:`设备`,
    address:`地址`,
    traffic:`访问量`,
    time:`访问时间`,
    operation:`操作`
  });
}

class App extends React.Component {
  state = {
    selectedRowKeys: [], // Check here to configure the default column
  };

  onSelectChange = (selectedRowKeys: any) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  };

  render() {
    const { selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
      selections: [
        Table.SELECTION_ALL,
        Table.SELECTION_INVERT,
        Table.SELECTION_NONE,
        {
          key: 'odd',
          text: 'Select Odd Row',
          onSelect: (changableRowKeys: any[]) => {
            let newSelectedRowKeys = [];
            newSelectedRowKeys = changableRowKeys.filter((key, index) => {
              if (index % 2 !== 0) {
                return false;
              }
              return true;
            });
            this.setState({ selectedRowKeys: newSelectedRowKeys });
          },
        },
        {
          key: 'even',
          text: 'Select Even Row',
          onSelect: (changableRowKeys: any[]) => {
            let newSelectedRowKeys = [];
            newSelectedRowKeys = changableRowKeys.filter((key, index) => {
              if (index % 2 !== 0) {
                return true;
              }
              return false;
            });
            this.setState({ selectedRowKeys: newSelectedRowKeys });
          },
        },
      ],
    };
    return <Table rowSelection={rowSelection} columns={columns} dataSource={data} />;
  }
}

export default App;